<template>
  <div class="some">
    <div class="demoDiv">
      <h2>我是检测watch监听的</h2>
      <input type="text" v-model="inputval" placeholder="inputval" />
      <h2>按键修饰符</h2>
      <input type="text" @keydown.space="func()" />
      <h2>逆向传值</h2>
      <Zi @zizi="fudata" />
      <h2>ref逆向传值</h2>
      <refde ref="refdemo" />
      <button @click="reffun()">点我完成ref逆向传值</button>
      <h2>同胞传值</h2>
      <Zia />
      <Zib />
      <h2>我是动态组件</h2>
      <button @click="fun('one')">点我去one</button>
      <button @click="fun('two')">点我去two</button>
      <button @click="fun('three')">点我去three</button>
      <component :is="com"></component>
    </div>
    <h2>我是keep-alive</h2>
    <button @click="fun('one')">点我去one</button>
    <button @click="fun('two')">点我去two</button>
    <button @click="fun('three')">点我去three</button>
    <keep-alive include="one" exclude="two">
      <component :is="com"></component>
    </keep-alive>
    <h2>$set------$set----------$set</h2>
    <h5>vue数据变 视图不会变</h5>
    <h5>{{ obj.name }}-------{{ obj.age }}</h5>
    <button @click="funn()">点我添加新内容</button>
    <h2>自定义指令</h2>
    <h4 v-xiaoming>我是用来测试自定义指令的</h4>
    <h2>mixin------混入</h2>
    <button @click="fff()">点我调用全局混入的方法</button>
    <button @click="fff()">点我调用局部混入的方法========{{text}}</button>
  </div>
</template>

<script>
import Zi from "./somezi.vue";
import refde from "@/components/testdemo/refdemo.vue";
import Zia from "../components/testdemo/zia.vue";
import Zib from "../components/testdemo/zib.vue";
import One from "../components/testdemo/one.vue";
import Two from "../components/testdemo/two.vue";
import Three from "../components/testdemo/three.vue";

import {demo} from "../mixin"
export default {
  data() {
    return {
      inputval: "",
      com: "",

      obj: {
        name: "xixi",
      },
    };
  },
  components: {
    Zi,
    refde,
    Zia,
    Zib,
    One,
    Two,
    Three,
  },
  watch: {
    inputval(newval, oldval) {
      console.log("这是最新的值", newval + "这是旧的值:", oldval);
    },
  },
  directives: {
    xiaoming: {
      inserted(el) {
        el.style.color = "red";
      },
    },
  },
  mixins:[demo],
  methods: {
    func() {
      console.log("空格被按下了");
    },
    fudata(text) {
      console.log("我是逆向传值：", text);
    },
    reffun() {
      return this.$refs.refdemo.fun();
    },
    fun(coms) {
      return (this.com = coms);
    },
    funn() {
      // this.obj.age=18;
      this.$set(this.obj, "age", 18);
      console.log("age", this.obj.age);
    },
  },
};
</script>

<style scoped>
.some {
  width: 100%;
  height: 6.5rem;
  background-color: #fff;
}
input {
  border: 0.01rem solid #000;
}
.some {
  min-height: 10rem;
}
</style>